<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <link rel="stylesheet" href="./js/lib/swiper.min.css">
    <title>编辑添加收货地址</title>
    <style>
        .wx-fix {
            margin-top: 0!important;
        }
        .region-title {
            width: 100%;
        }
        .region-title .ul {
            white-space: nowrap;
        }
        .goods-details-pg .regions-pop .region-title ul li {
            width: 20%;
            margin: 0;
        }
        .goods-details-pg .regions-pop .region-title ul li a{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body class="goods-details-pg" >
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-column">
                    <div class="t-column-title">
                        <p class="addr-p">收货人</p>
                        <input type="text" class="t-column-span" placeholder="请输入收货人" v-model="name">
                    </div>
                </div>
                <div class="t-column">
                    <div class="t-column-title">
                        <p class="addr-p">收货人手机号</p>
                        <input type="text" class="t-column-span" placeholder="请输入收货人手机号" v-model="mobile">
                    </div>
                </div>
                <div class="t-column">
                    <div class="t-column-title">
                        <p class="addr-p">所在地区</p> 
                        <span v-cloak class="addr-span">{{selected_regions_show}}</span>
                        <a href="javascript:void(0)" @click="hidefn">请选择<i class="t-account-icons" ></i></a>
                    </div>
                </div>
                <div class="t-column">
                    <div class="t-column-title t-add-address-title">
                        <textarea placeholder="请填写详细地址，不少于5个字" class="t-detailed-address" v-model="address"></textarea>
                    </div>
                </div>

                <div class="t-column t-addr-column">
                    <div class="t-column-title">
                        <p class="addr-p">设为默认</p>
                        <input type="checkbox" class="t-taggle-btn" v-model="def" v-bind:true-value="1" v-bind:false-value="0">
                    </div>
                </div>
            </div>
        </div>
        <div class="popup" :class="{hide:pop_hide}">
            <div class="pop-main">
                <regions-pop v-on:select_event="selectedcallback"  ref='reg' :cdata="fArr"></regions-pop>
            </div>
            <div class="layer" @click="hidefn"></div>
        </div>
        <toast ref="toast"></toast>
        <div class="t-footer return-footer add-footer">
            <div class="t-footer">
                <!-- <div class="t-btn-group"> -->
                <button type="button" class="form-btn" @click.prevent="editAddr" v-if="edit_id">保存</button>
                <button type="button" class="form-btn" @click.prevent="addAdress" v-else>保存</button>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <script type="text/template" id="regions-pop" >
        <div class="regions-pop" :class="{'wx-fix':isWechat}">
           <!--  <div class="pop-title">
                <span class="arrow_l">&lt;</span>
                <span class="pg-title">选择地区</span>
            </div> -->
            <div class="region-title">
                <ul  class="swiper-wrapper cl">
                 <li :class="{active:areaShow==1}" class="swiper-slider" ><a href="#" @click.prevent="change_regions(1)">{{area_selected.province}}</a></li>
                 <li :class="{active:areaShow==2}" class="swiper-slider" ><a href="#" @click.prevent="change_regions(2)">{{area_selected.city}}</a></li>
                 <li :class="{active:areaShow==3}" class="swiper-slider" ><a href="#" @click.prevent="change_regions(3)">{{area_selected.district}}</a></li>
                 <li :class="{active:areaShow==4}" class="swiper-slider" ><a href="#" @click.prevent="change_regions(4)">{{area_selected.town}}</a></li>      
                 <li :class="{active:areaShow==5}" class="swiper-slider" ><a href="#" @click.prevent="change_regions(5)">{{area_selected.village}}</a></li>
                </ul>
            </div>
            <div class="regions-list">
                <ul>
                    <li v-for="area in provinces" v-if="areaShow==1"><a href="#" @click.prevent="selectfn(area.region_type,area.region_id,area.provice_name)" v-cloak>{{area.provice_name}}</a>
                    </li>
                    <li v-for="area in citys" v-if="areaShow==2"><a href="#" @click.prevent="selectfn(area.region_type,area.region_id,area.city_name)" v-cloak>{{area.city_name}}</a>
                    </li>
                    <li v-for="area in district" v-if="areaShow== 3"><a href="#" @click.prevent="selectfn(area.region_type,area.region_id,area.county_name)" v-cloak>{{area.county_name}}</a>
                    </li>
                    <li v-for="area in town" v-if="areaShow== 4"><a href="#" @click.prevent="selectfn(area.region_type,area.region_id,area.town_name)" v-cloak>{{area.town_name}}</a>
                    </li>
                    <li v-for="area in village" v-if="areaShow== 5"><a href="#" @click.prevent="selectfn(area.region_type,area.region_id,area.village_name)" v-cloak>{{area.village_name}}</a>
                    </li>
                </ul>               
            </div>
       </div>
    </script>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script src="./js/lib/swiper.min.js"></script>
    <script>
        var store_id = parseInt(APP.getQueryString("storeid"));
        var cartid = APP.getQueryString("cartIds");
        var bn_cartid = APP.getQueryString("bncartid");
        var _addrid = APP.getQueryString("addr_id");
        var ncartidname = "";
        var n_addrid="";
        var n_cartid="";
        if (bn_cartid) {
            n_cartid = bn_cartid;
            ncartidname = 'bncartid';
        } else {
            n_cartid = cartid;
            ncartidname = 'cartIds';
        }
        if (_addrid!="null"&&_addrid) {
            n_addrid=_addrid;
        }
        Vue.component("regions-pop", {
            template: "#regions-pop",
            props:['cdata'],
            data: function() {
                return {
                    regions: '',
                    // area_selected: ["请选择", "请选择", "请选择","请选择", "请选择"],
                    area_selected:{
                        province:"请选择",
                        city:"请选择",
                        district:"请选择",
                        town:"请选择",
                        village:"请选择"
                    },
                    area_selected_id:{
                        proId:'',
                        cityId:'',
                        disId:'',
                        townId:'',
                        villId:''
                    },
                    provinces: "",
                    citys: "",
                    district: "",
                    town:"",
                    village:"",
                    REG: '',
                    addr:'',
                    store_id: APP.getQueryString('storeid'),
                    provinceId:'',
                    cityId:'',
                    districtId:'',
                    townId:'',
                    villageId:'',
                    editId:'',
                    areaShow:5,
                    isWechat:APP.iswechat()
                }

            },
            mounted: function() {
                if (!n_addrid) {
                this.add_information();
                this.areaShow=1;
                }
            },
            methods: {
                selectfn: function(parentid, regionid, regionname) {
                    var _url = PHPHOST + 'api/common/region/area-data';
                    var that = this;
                    Vue.http.options.xhr = {
                        withCredentials: true
                    }
                    if (parentid == 1) {
                        this.area_selected.province=regionname;
                        this.area_selected_id.proId=regionid;
                        this.area_selected.city="请选择";
                        this.area_selected_id.cityId="";
                        this.area_selected.district="请选择";
                        this.area_selected_id.disId="";
                        this.area_selected.town="请选择";
                        this.area_selected_id.townId="";
                        this.area_selected.village="请选择";
                        this.area_selected_id.villId="";
                        this.addr = regionname;
                        Vue.http.get(_url + '?type=2&region_id=' + regionid).then(function(_res){                    
                            that.citys = _res.body.data;
                            that.areaShow=2;
                        },function(){
                            console.log('err');
                        })
                        
                    }
                    if(parentid == 2){
                        var addr = addr;
                        this.addr += regionname; 
                        this.area_selected.city=regionname;
                        this.area_selected_id.cityId=regionid;
                        this.area_selected.district="请选择";
                        this.area_selected_id.disId="";
                        this.area_selected.town="请选择";
                        this.area_selected_id.townId="";
                        this.area_selected.village="请选择";
                        this.area_selected_id.villId="";
                        Vue.http.get(_url + '?type=3&region_id=' + regionid).then(function(_res){
                            that.district =  _res.body.data;      
                            that.areaShow=3;                      
                        })                                                                                                                  
                        }
                    if(parentid == 3){
                        var addr = addr;
                        this.addr += regionname; 
                        this.area_selected.district=regionname;
                        this.area_selected_id.disId=regionid;
                        this.area_selected.town="请选择";
                        this.area_selected_id.townId="";
                        this.area_selected.village="请选择";
                        this.area_selected_id.villId="";
                        Vue.http.get(_url + '?type=4&region_id=' + regionid).then(function(_res){
                            that.town =  _res.body.data;
                            that.areaShow=4;                           
                        })
                    }
                     if(parentid == 4){
                        var addr = addr;
                        this.addr += regionname; 
                        this.area_selected.town=regionname;
                        this.area_selected_id.townId=regionid;
                        this.area_selected.village="请选择";
                        this.area_selected_id.villId="";
                        Vue.http.get(_url + '?type=5&region_id=' + regionid).then(function(_res){
                            that.village =  _res.body.data;
                            that.areaShow=5;                              
                        })
                    }
                    if(parentid == 5){
                            this.addr += regionname;
                            this.area_selected.village=regionname;
                            this.area_selected_id.villId=regionid;
                            this.REG = this.area_selected_id;
                            var addrSelected= this.area_selected.province+this.area_selected.city+this.area_selected.district+this.area_selected.town+this.area_selected.village;
                            this.$emit("select_event", this.area_selected_id, addrSelected);
                        }
                        
                },
                change_regions: function(index) {
                    this.areaShow=index;
                    // switch(index) {
                    //     case 'province':
                    //     this.areaShow=1;
                    //     break;
                    //     case 'city':
                    //     this.areaShow=2;
                    //     break;
                    //     case 'district':
                    //     this.areaShow=3;
                    //     break;
                    //     case 'town':
                    //     this.areaShow=4;
                    //     break;
                    //     case 'village':
                    //     this.areaShow=5;
                    //     default:
                    //     return;
                    // }
                    // this.areaShow=index+1;
                },
                // getAddrData: function() {
                //     if (n_addrid) {
                //         Vue.http.get(APIPHP + 'index.php?r=member/u/recipient-detail&storeid=' + store_id + '&id=' + n_addrid).then(function(_res) {
                //             this.fArr={
                //                 province:_res.body.data.province,
                //                 city:_res.body.data.city,
                //                 district:_res.body.data.district,
                //                 town:_res.body.data.town,
                //                 street:_res.body.data.village,
                //                 editAddr:"1"
                //             }  
                //         }.bind(this), function() {
                //             console.log('err');
                //         })
                //     }

                // },
                adit_infomation:function(){
                    var that = this;
                    var _url = PHPHOST + 'api/common/region/area-data' ;
                    Vue.http.options.xhr = {
                        withCredentials: true
                    }
                    that.provinceId = that.cdata.province;
                    that.cityId = that.cdata.city;
                    that.districtId = that.cdata.district;
                    that.townId = that.cdata.town;
                    that.villageId = that.cdata.street;
                    that.editId = that.cdata.editAddr;
                    //获取省份ajax
                    Vue.http.get(_url).then(function(_res){
                        that.provinces = _res.body.data;
                        //获取编辑省份名
                        if(that.provinceId != ""){
                            for(var i = 0;i < that.provinces.length; i++){
                                if(that.provinces[i].region_id == that.provinceId){
                                    that.area_selected.province=that.provinces[i].provice_name;
                                    // that.$set(that.area_selected_id, 0, that.regions[i].region_id);
                                }
                            }
                        }
                        
                    },function(){
                        console.log('err');
                    })
                    if(that.editId == '1'){
                        //获取城市ajax
                        Vue.http.get(_url+ '?type=2&region_id=' + that.provinceId).then(function(_res){
                            that.citys = _res.body.data;
                            //获取编辑城市名
                            if(that.cityId != ""){
                                for(var i = 0;i < that.citys.length; i++){
                                    if(that.citys[i].region_id == that.cityId){
                                        that.area_selected.city=that.citys[i].city_name;
                                        // that.$set(that.area_selected_id, 1, that.regions[i].region_id);
                                    }
                                }
                            }
                            
                        },function(){
                            console.log('err');
                        })

                        //获取区ajax
                        Vue.http.get(_url+ '?type=3&region_id=' + that.cityId).then(function(_res){
                            that.district = _res.body.data;
                            //获取编辑区名
                            if(that.districtId != ""){
                                for(var i = 0;i < that.district.length; i++){
                                    if(that.district[i].region_id == that.districtId){
                                        that.area_selected.district=that.district[i].county_name;
                                        // that.$set(that.area_selected_id, 2, that.regions[i].region_id);
                                    }
                                }
                            }
                            
                        },function(){
                            console.log('err');
                        })

                        //获取镇ajax
                        Vue.http.get(_url+ '?type=4&region_id=' + that.districtId).then(function(_res){
                            that.town = _res.body.data;
                            //获取编辑区名
                            if(that.townId != ""){
                                for(var i = 0;i < that.town.length; i++){
                                    if(that.town[i].region_id == that.townId){
                                        that.area_selected.town=that.town[i].town_name;
                                        // that.$set(that.area_selected_id, 3, that.regions[i].region_id);
                                    }
                                }
                            }
                            
                        },function(){
                            console.log('err');
                        })

                         //获取村ajax
                        Vue.http.get(_url+ '?type=5&region_id=' + that.townId).then(function(_res){
                            that.village = _res.body.data;
                            //获取编辑村名
                            if(that.villageId != ""){
                                for(var i = 0;i < that.village.length; i++){
                                    if(that.village[i].region_id == that.villageId){
                                        that.area_selected.village=that.village[i].village_name;
                                        // that.$set(that.area_selected_id, 4, that.regions[i].region_id);
                                    }
                                }
                            }
                            
                        },function(){
                            console.log('err');
                        })
                    }    
                },
                add_information:function(){
                    var that = this;
                    var _url = PHPHOST + 'api/common/region/area-data' ;
                    Vue.http.options.xhr = {
                        withCredentials: true
                    }
                    //获取省份ajax
                    Vue.http.get(_url).then(function(_res){
                        that.regions = _res.body.data;
                        that.provinces = _res.body.data;
                        //获取编辑省份名
                        console.log(_res)
                        if(that.provinceId != ""){
                            for(var i = 0;i < that.regions.length; i++){
                                if(that.regions[i].region_id == that.provinceId){
                                    that.$set(that.area_selected, 0, that.regions[i].provice_name);
                                }
                            }
                        }
                        
                    },function(){
                        console.log('err');
                    })

                }
            }
        })
        var toast = new component.popup.toast();
        var app = new Vue({
            el: '#personal_center',
            data: {
                header: {
                    show: !APP.iswechat()
                },
                btn: true,
                name: "",
                address: "",
                zip: "",
                com: "",
                mobile: "",
                def: '',
                province: '',
                city: '',
                district: '',
                pop_hide: true,
                selected_regions_show: "",
                editReg: '',
                store_id: APP.getQueryString('storeid'),
                edit_id: APP.getQueryString('addr_id'),
                cart_id: APP.getQueryString('cartIds'),
                shop_name: '',
                list: {},
                provinceId:'',
                cityId:'',
                districtId:'',
                townId:'',
                villageId:'',
                fArr:{}
                
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                this.getAddrData();
                 setTimeout(function () {
                 var mySwiperNav = new Swiper ('.region-title', {
                     slidesPerView: 2,
                     spaceBetween: 10,
                     freeMode: true,
                     freeModeMomentumBounce:true,
                     resistance:true
                   }) 
                 // mySwiperlist.slides[0].style.width='130px';
                }.bind(this),2000)
            },
            components: {
                'toast': toast             
                
            },
            methods: {
                goback: function() {
                    window.history.go(-1);

                },
                hidefn: function() {
                    this.pop_hide = !this.pop_hide;
                },
                selectedcallback: function(m, n) {
                    this.pop_hide = true;
                    this.selected_regions_show = n;
                    this.province = m.proId||this.fArr.province;
                    this.city = m.cityId||this.fArr.city;
                    this.district = m.disId||this.fArr.district;
                    this.townId = m.townId||this.fArr.town;
                    this.villageId = m.villId||this.fArr.street;
                },
                //新增
                addAdress: function() {
                    if (this.name == '' || this.name == undefined) {
                        this.$refs.toast.show('收货人不能为空');
                        return;
                    }
                    if (this.mobile == '' || this.mobile == undefined) {
                        this.$refs.toast.show('手机号不能为空');
                        return;
                    }
                    if (!(/^1\d{10}$/.test(this.mobile))) {
                        this.$refs.toast.show('手机号输入有误');
                        return;
                    }

                    if (this.address == '' || this.address == undefined) {
                        this.$refs.toast.show('详细地址不能为空');
                        return;
                    }
                    if (this.address.length < 5) {
                        this.$refs.toast.show('详细地址不能少于5个字');
                        return;
                    }
                    if(this.selected_regions_show == '' || this.selected_regions_show == undefined){
                        this.$refs.toast.show('所在地区不能为空');
                        return;
                    }
                    var _url = APIPHP + 'index.php?r=member/u/recipient-add&storeid=' + store_id;
                    Vue.http.post(_url, {
                        mobile: this.mobile,
                        address: this.address,
                        def: this.def,
                        name: this.name,
                        //reg: this.$refs.reg.REG,
                        province:this.province,
                        city:this.city,
                        district:this.district,
                        area_town:this.townId,
                        area_village:this.villageId,
                        zip: this.zip
                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.flag == 1) {
                            if (!n_cartid) {
                                window.location.href = 'address.html?storeid=' + store_id;
                            } else {
                                window.location.href = 'selected-address.html?storeid=' + store_id + '&' + ncartidname + '=' + n_cartid;
                            }

                        } else {
                            this.$refs.toast.show(_res.body.msg);
                        }
                    }.bind(this), function() {
                        console.log("err")
                    })

                },
                //编辑
                editAddr: function() {

                    if (this.name == '' || this.name == undefined) {
                        this.$refs.toast.show('用户姓名不能为空');
                        return;
                    }
                    if (this.mobile == '' || this.mobile == undefined) {
                        this.$refs.toast.show('手机号不能为空');
                        return;
                    }
                    if (!(/^1\d{10}$/.test(this.mobile))) {
                        this.$refs.toast.show('手机号输入有误');
                        return;
                    }

                    if (this.address == '' || this.address == undefined) {
                        this.$refs.toast.show('详细地址不能为空');
                        return;
                    }
                    if (this.address.length < 5) {
                        this.$refs.toast.show('详细地址不能少于5个字');
                        return;
                    }
                    _url = APIPHP + 'index.php?r=member/u/recipient-add&storeid=' + store_id;
                    var _data;
                    if (this.province) {
                    _data={
                        addr_id: n_addrid,
                        mobile: this.mobile,
                        address: this.address,
                        def: this.def,
                        name: this.name,
                        //reg: (this.$refs.reg.REG == '') ? this.editReg : this.$refs.reg.REG,
                        province:this.province,
                        city:this.city,
                        district:this.district,
                        area_town:this.townId,
                        area_village:this.villageId,
                        zip: this.zip
                    }
                    }else{
                        _data={
                            addr_id: n_addrid,
                            mobile: this.mobile,
                            address: this.address,
                            def: this.def,
                            name: this.name,
                            //reg: (this.$refs.reg.REG == '') ? this.editReg : this.$refs.reg.REG,
                            province:this.fArr.province,
                            city:this.fArr.city,
                            district:this.fArr.district,
                            area_town:this.fArr.town,
                            area_village:this.fArr.street,
                            zip: this.zip
                        }
                    }
                    Vue.http.post(_url, _data, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.flag == 1) {
                            this.$refs.toast.show('编辑地址成功');
                            setTimeout(function(){
                                if (!n_cartid) {
                                window.location.href = 'address.html?storeid=' + store_id;
                            } else {
                                window.location.href = 'selected-address.html?storeid=' + store_id + '&' + ncartidname + '=' + n_cartid;
                            }
                        },1000)
                            
                        }
                    }.bind(this), function() {
                        console.log("err");
                    })
                },
                //获取地址参数
                getAddrData: function() {
                    if (n_addrid) {
                        Vue.http.get(APIPHP + 'index.php?r=member/u/recipient-detail&storeid=' + store_id + '&id=' + n_addrid).then(function(_res) {
                            this.name = _res.body.data.recevier;
                            this.mobile = _res.body.data.mobile;
                            this.address = _res.body.data.addr;
                            this.def = _res.body.data.def_addr;
                            this.selected_regions_show = _res.body.data.addr_str;
                            //this.editReg = _res.body.data.province + ',' + _res.body.data.city + ',' + _res.body.data.district;
                            this.fArr={
                                province:_res.body.data.province,
                                city:_res.body.data.city,
                                district:_res.body.data.district,
                                town:_res.body.data.town,
                                street:_res.body.data.village,
                                editAddr:"1"
                            }
                            setTimeout(function(){
                            this.$refs.reg.adit_infomation();
                            }.bind(this),0) 

                        }.bind(this), function() {
                            console.log('err');
                        })
                    }

                }

            }
        })
    </script>
</body>

</html>